<template>
	<!-- 竖条目录 -->
	<view class="pug-chapter-box">
		<u-empty v-if="chapterList && chapterList.length == 0"  mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<!-- 
			<view v-for="(item,index) in chapterListAll">
				{{item.index}}：{{item.title}}
			</view>
		 -->
		<view class="chapter-items"
			v-for="(chapter,index) in chapterList" :key="chapter.id">
				<view class="title-box" :class="[(chapterindex==index)?'active':'']" 
				@click="handleChapter(index)">
					<view class="title">{{chapter.title}}</view>
					
					
					<template v-if="chapter.childrens && chapter.childrens.length > 0">
						<text v-if="chapter.expand" class="iconc iconfont icon-arrow-up"></text>
						<text v-else class="iconc iconfont icon-arrow-down"></text>
					</template>

				</view>
			
			<template v-if="chapter.childrens && chapter.childrens.length > 0">
				<view class="lession-box" v-show="chapter.expand">
					<view class="lession-items"
					@click="handleClick(index,cindex)"
					:class="[(chapterindex==index && lessonindex==cindex) ? 'active' : '']"
					v-for="(lesson,cindex) in chapter.childrens">
						<text class="icon iconfont icon-play"></text>
						<view class="content">
							<text class="lession-title">
								<text class="lession-number">
								{{cindex + 1}}.
								</text>
								{{lesson.title}}
							</text>
							<text class="lession-time">17分钟</text>
						</view>
					</view>
				</view>

			</template>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"Pugchapterlesson",
		props: {
			courseId: {
				type: [String,Number],
				default: ""
			},
			chapterindex: {
				type: [String,Number],
				default: 0
			},
			lessonindex: {
				type: [String,Number],
				default: 0
			}
		},
		data() {
			return {
				// 章
				chapterList: [],
				chapterListAll: []
			};
		},
		created(){
			
			this.loadChapterLesson()
		},
		methods: {
			// 这个方法当作模板
			async loadChapterLesson(){
				const resData = await this.$request.post(this.$api.getChapterLessonDetail + "/" + this.courseId)
				// 不知道为什么两个需要在不同的一个内存地址当中
				const chapterLessons = resData.chapterLessons
				if(chapterLessons && chapterLessons.length > 0){
					this.chapterList = chapterLessons.map(chapter=>{
						chapter.expand = false
						return chapter
					})
					// 默认打开第一个章
					this.chapterList[0].expand = true
					
					
					// 把数据进行转换成单个数组
					chapterLessons.forEach((chapter,index)=>{
						// 章id和章标题
						const {id: chapterId,title: chapterTitle} = chapter; 
						let {childrens} = chapter;
						// 如果存在节
						if(childrens && childrens.length > 0){
							// 得出节的
							childrens.forEach((lession,cindex)=>{
								// 1-1 1-2 1-3这种形式
								let indexstr = (index + 1) + "-" + (cindex + 1);
								this.chapterListAll.push({
									index: indexstr,
									chapterIndex: index,
									lessonIndex: cindex,
									id: lession.id,
									title: lession.title,
									coursetimer: lession.coursetimer,
									ctitle: chapterTitle,
									cid: chapterId
								})
							})
						}
					})
					// 把数据通过$emit的方式传递给父组件
					this.$emit("chapterdata",this.chapterListAll)
				}
				
				
			},
			// 展开章
			handleChapter(index){
				// 互斥就打开 [0,1,2]
				// this.chapterList.filter((chapter,idx)=>{
				// 	return index != idx
				// }).forEach((chapter)=>{
				// 	chapter.expand = false
				// })
				this.chapterList[index].expand = !this.chapterList[index].expand
			},
			handleChapterExpand(index){
				this.chapterList[index].expand = true
			},
			handleClick(chapterIndex,lessonIndex){
				const currentIndex = this.chapterListAll.findIndex(item=>(item.chapterIndex==chapterIndex && item.lessonIndex==lessonIndex))
				this.$emit("change",{chapterIndex,lessonIndex,currentIndex})
			}
		}
	}
</script>

<style lang="scss">
	.pug-chapter-box{
		padding: 30rpx;
		.chapter-items{
			margin-bottom: 20rpx;
			&.active{
				color: red;
			}
			.title-box{
				.iconc{
					padding: 0 12rpx;
				}
				background: #f5f6fa;
				padding: 25rpx 20rpx;
				border-radius: 14px;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #666;
			}
		}
		.lession-box{
			margin-top: 20rpx;
			font-size: 28rpx;
			.lession-items{
				display: flex;
				align-items: flex-start;
				&.active{
					color: red;
				}
				.icon{
					margin-left: 20rpx;
					position: relative;
					top: 20rpx;
					font-size: 20px;
				}
				.content{
					margin-left: 10rpx;
					display: flex;
					flex-direction: column;
					border-bottom: 1px solid #f5f6fa;
					width: 100%;
					padding: 17rpx 7rpx;
					.lession-number{
						font-weight: bold;
					}
					.lession-time{
						font-size: 24rpx;
						color: #999;
						margin-top: 6rpx;
					}
				}
			}
		}
	}
	
</style>